var mycanvas = null;
var ctx = null;
$(document).ready(function() {
    var roomId = getUrlParam("id");
    var json = {};
    $.ajaxSettings.async = false;
    $.getJSON("./conf/conf.json", function (data) {
        if (data){
            json = data;
        }
    })
    mycanvas = document.getElementById('canvas');
    ctx = mycanvas.getContext('2d');
    cutMap("cf.jpg");
    //当前我方点
    var theMe = null;
    //当前敌方点
    var theYou = null;
    //当前c4点
    var theC4 = null;
    // 指定websocket路径
    var  websocket = new WebSocket("ws://"+json.ip+":8181/webSocket/"+roomId);
    websocket.onmessage = function(event) {
        var data=JSON.parse(event.data);
        if(data.to==0){//上线消息
            var me = data.me;
            var you = data.you;
            var img = data.img;
            var c4 = data.c4;
            var i = data.im;
            var code = data.code;
            if (code == 1){
                if(img){
                    cutMap(img);
                }
            } else {
                clearRect();
                downC4(c4,json.c4);
                point(me,json.me);
                ipoint(i,json.im);
                point(you,json.you);
            }
        }else if(data.to==1){//错误消息
            alert(data.mess);
        }else if(data.to==-2){//下线消息

        }
    };
    //获取url中的参数
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
    }
    function clearRect() {
        if (mycanvas){
            mycanvas.width = 512;
            mycanvas.height = 512;
        }
    }
    function downC4(point,color){
        //获取绘制二维上下文)
        if (!ctx) {
            return;
        }
        if (point != null){
            ctx.fillStyle=color;
            var strs = point.split(",");
            if (strs && strs.length == 2){
                //绘制成矩形
                ctx.fillRect(strs[0],strs[1],10,10);
            }
        }
    }
    //切换地图
    function cutMap(imgUrl) {
        clearRect();
        //获取绘制背景图
        $("#imgBack").css("background-image","url(./img/"+imgUrl+")");
    }
    //绘制我的坐标
    function ipoint(point,color){
        if (!ctx) {
            return;
        }
        if (point != null){
            ctx.fillStyle=color;
            var strs = point.split(",");
            if (strs && strs.length == 2){
                //绘制成矩形
                ctx.fillRect(strs[0],strs[1],5,5);
            }
        }
    }
    //绘制我方坐标
    function point(point,color){
        //获取绘制二维上下文
        if (!ctx) {
            return;
        }
        if (point != null){
            ctx.fillStyle=color;
            for (var i=0;i<point.length;i++){
                if (point[i]){
                    var strs = point[i].split(",");
                    if (strs && strs.length == 2){
                        //绘制成矩形
                        ctx.fillRect(strs[0],strs[1],5,5);
                    }
                }
            }
        }
    }

});